<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>挂载用户</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card class="ConditionArea">
            
            <el-form>
                <el-row>
                                <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>条件区域</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
                </el-row>
                <el-row>
                    <el-col :span="5" class="right">业务品牌:</el-col>
                    <el-col :span="4" class="left">
                            <el-select v-model="valueType" autocomplete="off">
                                <el-option v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"></el-option>
                            </el-select>
                    </el-col>
                    <el-col :span="5" class="right">手机号:</el-col>
                    <el-col :span="5" class="left">
                        <el-input class="findUser" type="text" placeholder="请输入手机号" v-model="phoneCode"></el-input>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        
        <el-card class="ConditionArea">
                <el-row>
                        <el-button type="primary" @click="queryList">查询</el-button>
                        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
                        <el-button type="success" @click="Download">导出</el-button>
                </el-row>
        </el-card>
        <el-card>
            <el-row>
                            <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>列表区域</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            </el-row>
            <el-table
                    :data="tableList"
                    border
                    ref="checkTable"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        align="center"
                        label="选择"
                        type="selection"
                        width="66px">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="id"
                        label="开户ID"
                        width="66px">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="phoneCode"
                        label="手机号"
                        width="120px">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brand.brandName"
                        label="业务品牌">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="policyName"
                        label="政策名">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="phoneMoney"
                        label="手机预存款">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="phoneCount"
                        label="出账总收入">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="phoneMiddleAction"
                        label="状态">
                    <template slot-scope="scope">
                        <span :class="scope.row.phoneMiddleAction==1?'statusActive':scope.row.phoneMiddleAction==0?'statusDel':'statusDel1'">{{scope.row.phoneMiddleAction==1?'生效中':scope.row.phoneMiddleAction==0?'已过期':''}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="tariffPackage"
                        label="资费套餐">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="effectiveTime"
                        label="办理日期">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="180px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                        background
                        layout="prev, pager, next" :total="this.count"
                        @current-change="fengye($event)"
                >
                </el-pagination>
                总条数:{{ this.count }}
                当前页数: {{ this.page }}/{{ this.pageCount }} 页
            </div>
        </el-card>
        <!--        添加-->
        <el-dialog title="请输入用户信息" :visible.sync="dialogVisible" width="35%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="手机号">
                    <el-input v-model="form.phoneCode"></el-input>
                </el-form-item>
                <el-form-item label="业务品牌" style="text-align:left;">
                    <el-select v-model="form.brandId" autocomplete="off">
                        <el-option label="动感地带" value="1"></el-option>
                        <el-option label="全球通" value="2"></el-option>
                        <el-option label="神舟行" value="3"></el-option>
                        <el-option label="数据卡" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出账总收入">
                    <el-input v-model="form.phoneCount"></el-input>
                </el-form-item>
                <el-form-item label="手机预存款">
                    <el-input v-model="form.phoneMoney"></el-input>
                </el-form-item>
                <el-form-item label="资费套餐">
                    <el-input v-model="form.tariffPackage"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </span>
        </el-dialog>
        <!--        修改-->
        <el-dialog title="请输入用户信息" :visible.sync="dialogFormEditVisible" width="35%">
            <el-form ref="form" :model="saveform" label-width="100px">
                <el-form-item label="手机号">
                    <el-input v-model="saveform.phoneCode" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机预存款">
                    <el-input v-model="saveform.phoneMoney"></el-input>
                </el-form-item>
                <el-form-item label="出账总收入">
                    <el-input v-model="saveform.phoneCount"></el-input>
                </el-form-item>
                <el-form-item label="资费套餐">
                    <el-input v-model="saveform.tariffPackage"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEditVisible=false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "addUser",
        data() {
            return {
                disabled: true,
                readonly: true,
                page: 1,
                pageCount: 0,
                count: 0,
                zongji: 10,
                yeshu: 1,
                limit: 10,
                tableData: [],
                ceshi: [],
                ce: 0,
                zongyeshu: 10,
                phoneCode: "",
                tableList: [],
                multipleSelection: [],
                ids: '',
                dialogVisible: false,
                dialogFormEditVisible: false,
                options: [{
                    value: '',
                    label: '全部'

                }, {
                    value: '1',

                    label: '生效中'

                }, {
                    value: '0',

                    label: '已过期'

                }],
                valueType: '',
                form: {
                    phoneCode: '',
                    policyName: '',
                    brandId: '',
                    phoneCount: '',
                    phoneMoney: '',
                    tariffPackage:''
                },
                saveform: {
                    id: '',
                    phoneCode: '',
                    phoneCount: '',
                    phoneMoney: '',
                    tariffPackage: ''
                },
            }
        },
        created() {
            this.page=1,
                this.pageCount=0,
                this.count=0,
            this.tableData = [],
                this.ceshi = [],
                this.ce = 0,
                this.$axios.get('api/phone/selectForPage',
                    {
                        params: {
                            limit: 10,
                            page: 1
                        }
                    }
                ).then((res) => {

                    let result = res.data;
                    this.pageCount = result.pageCount;
                    this.count = result.count;
                    console.log(result.count)
                    if (result.code == 200) {
                        this.ceshi = result.data

                        for (let i = 0; i < this.ceshi.length; i++) {
                            for (let j = 0; j < this.ceshi[i].policyInfoList.length; j++) {
                                this.tableData[this.ce] = {ces: this.ce}
                                Object.assign(this.tableData[this.ce],
                                    this.ceshi[i].policyInfoList[j], this.ceshi[i].phoneMiddles[j], this.ceshi[i])
                                this.ce++
                            }
                        }
                    }
                    this.tableList = this.tableData
                    console.log(this.tableData)
                })
        },
        methods: {
            getList(page) {
                this.page=1,
                    this.pageCount=0,
                    this.count=0,
                this.tableData = [],
                    this.ceshi = [],
                    this.ce = 0,
                    this.$axios.get('api/phone/selectForPage', {
                        params: {
                            limit: this.limit,
                            page: page
                        }
                    }).then(res => {
                        let result = res.data;
                        this.pageCount = Math.ceil(result.length/this.limit);
                        this.count = result.length;
                        // console.log(result.data)
                        if (result.code == 200) {
                            this.ceshi = result.data
                            for (let i = 0; i < this.ceshi.length; i++) {
                                for (let j = 0; j < this.ceshi[i].policyInfoList.length; j++) {

                                    this.tableData[this.ce] = {ces: this.ce}
                                    Object.assign(this.tableData[this.ce],
                                        this.ceshi[i].policyInfoList[j], this.ceshi[i].phoneMiddles[j], this.ceshi[i])
                                    this.ce++
                                }
                            }
                        }
                        this.tableList = this.tableData
                        console.log(this.tableList)
                    })
            },
            //查询
            queryList() {
                this.page=1,
                    this.pageCount=0,
                    this.count=0,
                this.tableData = [],
                    this.ceshi = [],
                    this.ce = 0,
                    this.$axios.get('api/phone/selectForPage', {
                        params: {
                            limit: this.limit,
                            page: 1,
                            id: this.tableList.id,
                            phoneMiddleAction: this.valueType,
                            phoneCode: this.phoneCode,
                        }
                    }).then(res => {
                        let result = res.data;
                        this.pageCount = Math.ceil(result.length/this.limit);
                        this.count = result.length;
                        console.log(result.data)
                        if (result.code == 200) {
                            this.ceshi = result.data
                            console.log(result.data)
                            for (let i = 0; i < this.ceshi.length; i++) {
                                for (let j = 0; j < this.ceshi[i].policyInfoList.length; j++) {
                                    this.tableData[this.ce] = {ces: this.ce}
                                    Object.assign(this.tableData[this.ce],
                                        this.ceshi[i].policyInfoList[j], this.ceshi[i].phoneMiddles[j], this.ceshi[i])
                                    this.ce++
                                }
                            }
                        }
                        this.tableList = this.tableData
                        //console.log(this.tableList)
                        //console.log(this.valueType)
                    })
                this.phoneCode = ""
            },

            add() {
                this.$axios.post('api/phone/insert', {
                    tariffPackage:this.form.tariffPackage,
                    phoneCode: this.form.phoneCode,
                    brandId: Number(this.form.brandId),
                    policyName: this.form.policyName,
                    phoneMoney: this.form.phoneMoney,
                    phoneCount: this.form.phoneCount,
                }).then(res => {
                    if (res.data.code == 200) {
                        // this.tableList=res.data.data
                        // console.log(res.data)
                        this.$message({
                            message: "添加成功",
                            type: 'success'
                        })
                    } else if (res.data.code == 405) {
                        // this.$message(res.data.message)
                        this.$message({
                            message: "请求方式不正确",
                            type: 'warning'
                        })
                    } else if (res.data.code == 500) {
                        // this.$message(res.data.message)
                        this.$message({
                            message: "后台服务逻辑错误",
                            type: 'warning'
                        })
                    } else if (res.data.code == 404) {
                        // this.$message(res.data.message)
                        this.$message({
                            message: "找不到页面",
                            type: 'warning'
                        })
                    }
                    this.dialogVisible = false;
                    this.form = {};
                    this.getList(1)
                })

            },
            cancel() {
                this.dialogVisible = false
            },
            fengye: function (e) {
                // console.log(e);
                this.yeshu = e;
                this.page = e;
                // console.log(this.page)
                this.getList(e);

            },
            del: function (id) {
                this.$axios.post('api/phone/deleteById', this.$qs.stringify({
                    id: id
                }))
                    .then((res) => {
                        // console.log(id)
                        let result = res.data;
                        this.tableList = result.data;
                        this.getList(this.page);
                    })
            },
            edit: function (obj) {
                this.dialogFormEditVisible = true;
                this.saveform.id = obj.id;
                this.saveform.phoneCode = obj.phoneCode;
                this.saveform.phoneMoney = obj.phoneMoney;
                this.saveform.tariffPackage = obj.tariffPackage;
                this.saveform.phoneCount = obj.phoneCount;
            },
            save: function () {
                this.$axios.post('api/phone/updateById',
                    {
                        id: this.saveform.id,
                        phoneCode: this.saveform.phoneCode,
                        brandName: this.saveform.brandName,
                        phoneMoney: this.saveform.phoneMoney,
                        phoneCount: this.saveform.phoneCount,
                        tariffPackage: this.saveform.tariffPackage,
                    })
                    .then((res) => {
                        let result = res.data;
                        this.tableList = result.data;
                        this.dialogFormEditVisible = false
                        this.saveform = {}
                        this.getList(this.page);
                    })
            },
            exportData() {
                this.$axios.post('api/phone/EasyExcel', this.$qs.stringify({
                    id: id
                }))
                    .then((res) => {
                        // console.log(id)
                        let result = res.data;
                        this.tableList = result.data;
                        this.getList(this.page);
                    })
            },
            handleSelectionChange(val) {
                this.ids=""
                this.multipleSelection = val;
                console.log(this.multipleSelection);
                let arr = this.multipleSelection.map(string => {
                    return string.id
                })
                this.ids = arr.join(',')
            },
            Download() {
                var url2 = "api/phone/EasyExcel?id=" + this.ids;
                window.location.href = url2;
            },

        }

    }
</script>

<style scoped>
    .el-col {
        /* border: 1px solid black; */
        height: 50px;
        line-height: 50px;
    }
    .page{
        margin-top: 20px;
    }
    .ConditionArea{
        margin-bottom: 10PX;
    }
    .el-breadcrumb{
        margin-bottom: 10px;
    }
    .right {
        text-align: right;
    }
    .left {
        padding-left: 10px;
        text-align: left;
    }
    .statusActive{
        padding: 5px 10px;
        color: white;
        background-color: green;
    }
    .statusDel{
        padding: 5px 10px;
        color: white;
        background-color: red;
    }

</style>